<template>
  <div class="detail">
    <div class="header">
      <!-- <button @click="back">《</button> -->
      <van-icon class="back" @click="back" name="arrow-left" size="26" />
      <p class="p">{{ name }}</p>
    </div>
    <div class="avator">
      <!-- :style="{ background: `url(${avatorUrl})`, 'background-size': 'cover', }" -->
      <img :src="img" alt="" />
    </div>
    <!-- 列表 -->
    <ul class="scroll-box">
      <li v-for="(item, index) in num" :key="index">
        <h2>{{ item }}. Thanks♪(･ω･)ﾉ接口有问题签名错误</h2>
        <p>这里是{{ name }}的歌单列表--{{ item }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
// import { getSongsBySinger } from "./service";
export default {
  data() {
    return {
      name: "",
      num: 21,
      img: "",
    };
  },
  methods: {
    back() {
      this.$router.history.go(-1);
    },
    // async initData(id) {
    //   // if (!id) {
    //   //   return false;
    //   // }
    //   const data = await getSongsBySinger(id);
    //   console.log(data, "123455");
    // },
    getIDAndName(obj) {
      const { params, query } = obj;
      const { id } = params;
      const { name } = query;
      const { img } = query;
      if (!img) {
        return (this.img =
          "https://static2-qianqian.91q.com/client/img/31b35b2.jpg");
      }
      this.img = img;
      this.name = name;
      // this.initData(id);
      console.log(id);
    },
  },
  mounted() {
    this.getIDAndName(this.$route);
  },
  watch: {
    $route(newV, oldV) {
      if (newV.fullPath === oldV.fullPath) return false;
      this.getIDAndName(newV);
    },
  },
};
</script>

<style lang="less" scoped>
@import "styles/index.less";
.header {
  background: rgba(7, 17, 27, 0.4);
  .line-height(40);
  font-size: 18px;
  color: #ffcd32;
  position: fixed;
  top: 0;
  z-index: 8;
  .h(40);
  .w(375);
  .back {
    color: #ffcd32;
    position: absolute;
    .top(6);
    .left(14);
  }
  .p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    width: 80%;
    margin-left: 10%;

    // .margin-left(110);
  }
}
.detail {
  background: #222;
  .avator {
    // z-index: 0;
    // padding-top: 70%;
    // height: 0px;
    // transform: scale(1) translateZ(0px);
    .w(375);
    .h(260);
    // position: relative;
    // width: 100%;
    // transform-origin: top;
    // background-size: cover;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .scroll-box {
    .w(375);
    .min-h(600);
    color: #fff;
    overflow: scroll;
    font-size: 14px;
    background: #222;
    .padding(20,30,60,30);
    box-sizing: border-box;
    li {
      .h(88);
      .w(315);
      h2 {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #fff;
      }
      p {
        .w(315);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .margin-top(8);
        color: hsla(0, 0%, 100%, 0.3);
      }
    }
  }
}
</style>
